import React from 'react';
import Header from"./include/header";
import  Bottom from"./include/bottom";
import {SideBar} from "antd-mobile";


class App extends React.Component {
    categories = [
        {
            id:1,
            title:"饺子混沌",
            goods: [
                {
                    id:1,
                    name: "某某某某某商品1",
                    price: 32.5,
                    image:"/static/media/image/3.jpg",
                },
                {
                    id:2,
                    name: "某某某某某商品2",
                    price: 23.5,
                    image:"/static/media/image/1.jpg",
                },
                {
                    id:3,
                    name: "某某某某某商品3",
                    price: 56.5,
                    image:"/static/media/image/1.jpg",
                },
                {
                    id:4,
                    name: "某某某某某商品4",
                    price: 45,
                    image:"/static/media/image/2.jpg",
                },
                {
                    id:5,
                    name: "某某某某某商品5",
                    price: 12,
                    image:"/static/media/image/1.jpg",
                },
                {
                    id:21,
                    name: "某某某某某商品1",
                    price: 32.5,
                    image:"/static/media/image/3.jpg",
                },
                {
                    id:22,
                    name: "某某某某某商品2",
                    price: 23.5,
                    image:"/static/media/image/4.jpg",
                },
                {
                    id:23,
                    name: "某某某某某商品3",
                    price: 56.5,
                    image:"/static/media/image/2.jpg",
                },
                {
                    id:24,
                    name: "某某某某某商品4",
                    price: 45,
                    image:"/static/media/image/1.jpg",
                },
                {
                    id:25,
                    name: "某某某某某商品5",
                    price: 12,
                    image:"/static/media/image/4.jpg",
                },
            ]
        },
        {
            id:2,
            title:"汉堡薯条",
            goods: [
                {
                    id:6,
                    name: "某某某某某商品6",
                    price: 32.5,
                    image:"",
                },
                {
                    id:7,
                    name: "某某某某某商品7",
                    price: 23.5,
                    image:"",
                },
                {
                    id:8,
                    name: "某某某某某商品8",
                    price: 56.5,
                    image:"",
                },
                {
                    id:9,
                    name: "某某某某某商品9",
                    price: 45,
                    image:"",
                },
                {
                    id:10,
                    name: "某某某某某商品10",
                    price: 12,
                    image:"",
                },
            ]
        },
        {
            id:3,
            title:"煮面披萨",
            goods: []
        },
        {
            id:4,
            title:"包子粥店",
            goods: []
        },
        {
            id:5,
            title:"快餐便当",
            goods: []
        },
        {
            id:6,
            title:"米粉面馆",
            goods: []
        },
        {
            id:7,
            title:"麻辣烫冒菜",
            goods: []
        },
        {
            id:8,
            title:"川湘菜",
            goods: []
        },
        {
            id:9,
            title:"地方菜系",
            goods: []
        },
        {
            id:10,
            title:"炸鸡炸串",
            goods: []
        },
        {
            id:11,
            title:"特色小吃",
            goods: []
        },
        {
            id:12,
            title:"能量西餐",
            goods: []
        },
        {
            id:13,
            title:"夹馍饼类",
            goods: []
        },
        {
            id:14,
            title:"鸭脖卤味",
            goods: []
        },
        {
            id:15,
            title:"日料寿司",
            goods: []
        },
        {
            id:16,
            title:"香锅干锅",
            goods: []
        },
    ]

    constructor(props) {
        super(props);
        this.state={
             categories:this.categories,
            goodses:this.categories[0].goods
        }
    }

    render() {
        return (
        <div className={"categoryApp"}>
            <Header name={"商品分类"}/>
            <div className={"middleApp"}>
                <div className={"category"}>
                    <SideBar>
                        {this.state.categories.map(category => (
                            <SideBar.Item key={category.id} title={category.title} />
                        ))}
                    </SideBar>
                </div>
                <div className={"goods"}>
                    {this.state.goodses.map(goods =>
                        <div key={goods.id}>
                            <img className="goods" src={goods.image} alt=""/>
                            <span>
                                <span className={"title"}>{goods.title}</span><br/><br/>
                                <span className={"price"}>${goods.price.toFixed(2)}</span>
                        </span>
                        </div>
                    )}
                </div>
            </div>
            <Bottom history={this.props.history}/>
        </div>

    )
    }


}
export default App;